<template>
    <div class="wb-container">
        <div class="page-header">当前位置：<span class="text-primary">{{ }}</span></div>
        <div class="mian-content" v-if="isShow"><el-empty style="height: 700px;" description="暂无数据" /></div>
        <div class="mian-content" v-if="!isShow">
            <div class="steps">
                <el-steps :active="state == 'DOING' ? 1 : 2" align-center>
                    <el-step title="卖家下单" :description="create_time" />
                    <el-step title="订单完成" :description="end_time" />
                </el-steps>
            </div>
            <div style="display:flex">
                <div class="orderStatus">
                    <div class="jbInfo">
                        <div class="order-title">
                            <text>基本信息</text>
                        </div>
                        <div class="descriptions-list">
                            <el-descriptions :column="2" :size="size" border>
                                <el-descriptions-item label="订单编号" label-align="center" align="center">
                                    {{ list.timelineData.order_no }}
                                </el-descriptions-item>
                                <el-descriptions-item label="付款方式" label-align="center"
                                    align="center">微信支付</el-descriptions-item>
                                <el-descriptions-item label="用户头像" label-align="center" align="center">
                                    <template #default>
                                        <div class="member-popover">
                                            <span>
                                                <img :src="img">
                                            </span>
                                        </div>
                                    </template>
                                </el-descriptions-item>
                                <el-descriptions-item label="用户昵称" label-align="center" align="center">{{ name
                                }}</el-descriptions-item>
                            </el-descriptions>
                        </div>
                    </div>
                </div>
                <!-- 状态处理操作 -->
                <div class="orderStatus">
                    <div class="order-title">
                        <text>订单状态</text>
                    </div>
                    <div class="user-describe">
                        <div class="refund">
                            <div>订单状态:&nbsp;&nbsp;&nbsp;&nbsp;
                                <text v-if="state == 'DOING'" class="orderState revoked">服务中</text>
                                <text v-if="state == 'DONE'" class="orderState">已完成</text>
                                <text v-if="state == 'REFUND'" class="orderState">已退款</text>
                                <text v-if="state == 'REVOKED'" class="orderState revoked">已取消</text>
                                <text v-if="state == 'ERROR'" class="orderState revoked">异常订单</text>
                                <text v-if="state == 'ERROR_HANDLE'" class="orderState revoked">异常订单已处理</text>
                                <text v-if="state == 'DED_FAILED'" class="orderState revoked">扣款失败</text>
                            </div>
                            <div class="refundClick" v-if="state == 'DONE'">
                                <div class="refundMoney">
                                    <div> 输入退款金额: </div>
                                    <el-input v-model="amountVal" style="width: 200px;"></el-input>
                                </div>
                                <el-button type="danger" @click="refund">退款</el-button>
                            </div>
                            <div v-if="state == 'REVOKED'">
                                <div class="cancelColor">取消订单的原因：<span>{{ reasonText }}</span></div>
                            </div>
                            <div v-if="state == 'DONE'" class="textbox">友情提示： 交易成功，如买家有售后申请，请与买家进行协商，妥善处理</div>
                            <div v-if="state == 'DOING'" class="cancellationOrder">
                                <div style="width: 60%;">
                                    <el-input type="textarea" v-model="cancelList.reason" placeholder="请输入取消原因"></el-input>
                                </div>
                                <div>
                                    <el-button type="danger" @click="handleCancelOrde">取消订单</el-button>
                                </div>
                            </div>
                            <div v-if="state == 'ERROR'">
                                <el-tabs v-model="activeName" class="demo-tabs">
                                    <el-tab-pane label="完结订单" name="first">
                                        <el-form :model="endForm" label-width="120px">
                                            <el-form-item label="扣款金额">
                                                <el-input v-model="endForm.amount" placeholder="请输入扣款金额"
                                                    style="width: 60%;" />
                                            </el-form-item>
                                            <el-form-item label="扣款内容">
                                                <el-input v-model="endForm.error_handle_content" type="textarea"
                                                    placeholder="请输入扣款内容" style="width: 60%;" />
                                            </el-form-item>
                                            <el-form-item>
                                                <el-button type="primary" @click="endOrderOnSubmit">确定</el-button>
                                            </el-form-item>
                                        </el-form>
                                    </el-tab-pane>
                                    <el-tab-pane label="取消订单" name="second">
                                        <div class="cancellationOrder">
                                            <div style="width: 60%;">
                                                <el-input type="textarea" v-model="cancelList.reason"
                                                    placeholder="请输入取消原因"></el-input>
                                            </div>
                                            <div>
                                                <el-button type="danger" @click="handleCancelOrde">取消订单</el-button>
                                            </div>
                                        </div>
                                    </el-tab-pane>
                                </el-tabs>
                            </div>
                            <div v-if="state == 'DED_FAILED'">
                                <div class="cancelColor">扣款失败的原因：<span>{{ ded_failed }}</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 称重商品信息 -->
            <div class="orderList" v-if="historyParam.type == 1">
                <div class="order-title">
                    <text>商品信息</text>
                </div>
                <el-table :data="tableData" style="width: 100%;" border>
                    <template #empty>
                        <el-empty description="暂无数据！" />
                    </template>
                    <el-table-column prop="image" label="商品标题" align="center">
                        <template #default="{ row }">
                            <div class="goodsImg">
                                <img :src="row.image" alt="">
                                <div style="margin-left: 20px;">{{ row.name }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="id" label="ID" align="center" />
                    <el-table-column prop="pivot.price" label="单价" align="center">
                        <template #default="{ row }">
                            <span>￥{{ row.pivot.price }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="pivot.num" label="数量" align="center" />
                    <el-table-column prop="end_time" label="状态" align="center">
                        <template #default="scope">
                            <el-tag v-if="state == 'DOING'" type="warning">服务中</el-tag>
                            <el-tag v-if="state == 'REVOKED'" type="info">已取消</el-tag>
                            <el-tag v-if="state == 'DONE'" type="success">订单完成</el-tag>
                            <el-tag v-if="state == 'REFUND'">退款</el-tag>
                            <el-tag v-if="state == 'ERROR'" type="danger">异常订单</el-tag>
                            <el-tag v-if="state == 'ERROR_HANDLE'" type="danger">异常订单已处理</el-tag>
                            <el-tag v-if="state == 'DED_FAILED'" type="danger">扣款失败</el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 视觉商品信息 -->
            <div class="orderList" v-if="historyParam.type == 2">
                <div class="order-title">
                    <text>视觉商品</text>
                </div>
                <div v-if="list.identify == null">
                    <el-empty :image-size="200" />
                </div>
                <div v-for="(item, index) in list.identify" :key="index" class="order-box">
                    <div class="orderImg">
                        <div class="camera">摄像头：{{ index }}</div>
                        <div class="visionGoodsEdit">
                            <div v-for="(it, index) in item" :key="index" class="content">
                                <div class="order-left">
                                    <div>
                                        <div class="infoColor">摄像头ID:&nbsp;&nbsp;<span class="textStyle"> {{ it.cameraId
                                        }}</span></div>
                                        <div class="infoColor">
                                            <span>操作：</span>
                                            <el-tag v-if="it.type == 'openDoor'" round>开门</el-tag>
                                            <el-tag v-if="it.type == 'closeDoor'" round color="#fab6b6"
                                                style="color: #c45656;border-color: #f89898;">关门</el-tag>
                                            <el-tag v-if="it.type == 'closeDoorMp4'" round>摄像</el-tag>
                                        </div>
                                    </div>
                                    <div v-if="it.type !== 'closeDoorMp4'" class="img-box">
                                        <el-image :src="it.path" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                                            :preview-src-list="[it.path]" :initial-index="4" fit="cover" />
                                    </div>
                                    <div v-if="it.type == 'closeDoorMp4'" class="img-box">
                                        <el-button class="infoBackground" @click="videoBtnClick(it.path)">视频</el-button>
                                    </div>
                                </div>
                                <div class="order-right" v-if="it.type !== 'closeDoorMp4'">
                                    <div class="order-middle">
                                        <div class="goodsTitles top" v-if="it.type == 'openDoor'"><span>开门商品</span></div>
                                        <div class="goodsTitles top" v-if="it.type == 'closeDoor'"><span>关门商品</span></div>
                                        <el-table :data="it.goods" size="small"
                                            :header-cell-style="{ background: '#CDD0D6', color: '#909399' }" border>
                                            <el-table-column prop="name" label="名称" align="center" />
                                            <el-table-column prop="num" label="数量" align="center">
                                                <template #default="{ row }">
                                                    <span class="successColor">{{
                                                        row.num }}</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="price" label="价格" align="center">
                                                <template #default="{ row }">
                                                    <span>￥{{ row.price }}</span>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                    <div class="order-middle border" v-if="it.type == 'closeDoor'">
                                        <div class="goodsTitles top"><span class="identifyTitle">识别商品</span></div>
                                        <el-table :data="it.identifyData" size="small"
                                            :header-cell-style="{ background: '#509EFF', color: '#FFF' }" border>
                                            <el-table-column prop="name" label="名称" align="center" />
                                            <el-table-column prop="num" label="数量" align="center">
                                                <template #default="{ row }">
                                                    <span class="identifyColor">{{
                                                        row.num }}</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="price" label="价格" align="center">
                                                <template #default="{ row }">
                                                    <span>￥{{ row.price }}</span>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                        <div class="goodsTotal">购买商品金额：{{ it.total }} 元</div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="allTotal">总金额：<span style="color: red;">{{ total }} 元</span></div>
            </div>
            <div class="goOrderList">
                <el-button style="background-color: #D4D7DE;" @click="goOrderPage">返回订单列表</el-button>
            </div>
        </div>
        <el-dialog v-model="dialogVideoVisible" width="50%">
            <div class="dialogVideo">
                <video :src="videoSrc" style="width: 100%; height: 400px;" controls></video>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onBeforeMount, reactive } from 'vue'
import { orderEdit, refundInterface, cancelOrder, endOrder } from '@/api/order'
import { ElMessage } from 'element-plus'
import router from '@/router'

const tableData = ref(null)
const name = ref('')
const img = ref('')
const userId = ref('')
const state = ref(null)
const create_time = ref(null)
const end_time = ref(null)
const list = reactive({
    timelineData: {},
    identify: {
        '1': [
            {
                path: '',
                cameraId: '',
                type: '',
                goods: [],
                identifyData: []
            }
        ],
        '2': [
            {
                path: '',
                cameraId: '',
                type: '',
                goods: [],
                identifyData: []
            }
        ],
    }
})
const orderObj = reactive({
    order_id: '',
    amount: ''
})
const amountVal = ref('') //退款的金额
const oredrNo = ref('')
const reasonText = ref('')
const cancelList = reactive({
    out_order_no: '',
    reason: ''
})
const endForm = reactive({
    out_order_no: '',
    amount: '',
    error_handle_content: ''
})
const size = ref('')
const isShow = ref(false)
const activeName = ref("first")
const ded_failed = ref(null)
const historyParam = history.state.params
const total = ref(0)
const dialogVideoVisible = ref(false)
const videoSrc = ref('')

const getOrderEdit = async () => {
    const data = await orderEdit(historyParam.id).then(res => {
        const { code, data } = res
        if (code == 200) {
            if (data == null) {
                list.timelineData = []
                orderObj.order_id = ''
                oredrNo.value = ''
                isShow.value = true
            } else {
                orderObj.order_id = data.id
                list.timelineData = JSON.parse(JSON.stringify(data))
                oredrNo.value = data.order_no
                if (oredrNo.value == null) {
                    oredrNo.value = ''
                }
                if (data.reason == null) {
                    reasonText.value = '用户未购物'
                } else {
                    reasonText.value = data.reason
                }
                name.value = data.user.nickname
                img.value = data.user.head_img
                userId.value = data.user.id
                state.value = data.state
                ded_failed.value = data.ded_failed_content
                tableData.value = data.order_detail_goods
                create_time.value = data.create_time
                end_time.value = data.end_time
            }
        }
    })
    if (historyParam.type == 2) {
        await orderEdit(historyParam.id, { identify_datas: 1 }).then(s => {
            const { code, data } = s
            if (code == 200) {
                if (data.identify_datas == null) {
                    total.value = 0
                    list.identify = null
                } else {
                    total.value = data.identify_datas.total
                    delete data.identify_datas.total
                    list.identify = data.identify_datas
                }
            }

        })
    }
}
const videoBtnClick = (video) => {
    dialogVideoVisible.value = true
    videoSrc.value = video
}

onBeforeMount(() => {
    getOrderEdit()
})
//退款
const refund = async () => {
    const data = await refundInterface({
        order_id: orderObj.order_id,
        amount: amountVal.value
    }).then(res => {
        const { code, data } = res
        if (code == 200) {
            ElMessage.success('退款成功')
            getOrderEdit()
        }
    })
    amountVal.value = ''
}
//取消订单
const handleCancelOrde = async () => {
    if (cancelList.reason == '') {
        ElMessage.error('取消原因必填')
        return
    }
    cancelList.out_order_no = oredrNo.value
    const list = await cancelOrder(cancelList).then(res => {
        const { code, data } = res
        if (code == 200) {
            ElMessage.success('取消成功')
            cancelList.reason = ''
            getOrderEdit()
        }
    })
}
const endOrderOnSubmit = async () => {
    endForm.out_order_no = oredrNo.value
    if (endForm.amount == '') {
        ElMessage.error('扣款金额必填')
        return
    }
    if (endForm.error_handle_content == '') {
        ElMessage.error('扣款内容必填')
        return
    }
    await endOrder(endForm).then(res => {
        const { code, data } = res
        if (code == 200) {
            ElMessage.success('订单已完结')
            endForm.amount == ''
            endForm.error_handle_content == ''
            getOrderEdit()
        }
    })
}
const goOrderPage = () => {
    router.push('/order/orderList')
}

</script>

<style lang="less" scoped>
.page-content {
    padding: 20px 20px 20px 20px;
}

.timeline {
    padding: 20px;
}

.orderStatus {
    width: 50%;
    margin: 20px 10px 0 10px;
    border: 1px solid #f0f0f0;
    border-radius: 5px;
}

.orderList {
    margin-top: 20px;

    .allTotal {
        margin: 10px 0 0 20px;
        font-size: 14px;
        font-weight: bold;
        color: #000;
    }
}

.user-describe {
    margin-bottom: 10px;
    padding: 30px;
    padding-left: 15px;
    // border: 1px solid #efefef;

    div {
        line-height: 26px;
        color: #999;
    }
}

.order-title {
    line-height: 50px;
    background-color: #F0F2F5;
    border-radius: 5px 5px 0 0;

    text {
        margin-left: 20px;
        line-height: 32px;
        font-size: 16px;
        color: #909399;
        font-weight: bold;
    }

}

.descriptions-list {
    padding: 5px 10px;
    width: 100%;
}

.orderState {
    font-size: 18px;
    color: #54c952;
    font-weight: bold;
}

.steps {
    margin: 10px 120px 40px 120px;
}

.goodsImg {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    img {
        width: 60px;
        height: 60px;
        // margin: 10px;
    }
}

.orderDetaliItem {
    display: flex;
    border: 1px solid #efefef;
    margin-top: 20px;
}

.refundClick {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: baseline;
}

.refundMoney {
    display: flex;

    .el-input {
        margin-left: 5px;
    }
}

.refund .textbox {
    margin-top: 10px;
}

.refund div {
    font-weight: bold;
    color: #000;
}

.goOrderList {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.member-popover {

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    span {
        width: 100px;
        height: 100px;

        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
    }


}

.userinfo {
    margin-top: 2px;
}

.revoked {
    color: red;
}

.cancellationOrder {
    display: flex;
    flex-direction: column;
    margin-top: 20px;

    .el-button {
        margin-top: 10px;
    }
}

.cancelColor {
    font-size: 12px;
    color: #000;

    span {
        color: #54c952;
        font-size: 14px;
        font-weight: bold;
    }
}

:deep(.el-tabs) {
    margin-left: 20px;
    margin-top: 20px;
}

:deep(.el-descriptions .el-descriptions__header) {
    margin: 0;
    border: 1px solid #efefef;
    border-bottom: 0;
    background-color: #509eff;

    .el-descriptions__title {
        line-height: 50px;
        margin-left: 20px;
        color: #fff;
    }
}

:deep(.el-step__description) {
    font-size: 14px;
}

.visionOrderAmount {
    color: red;
    font-weight: bold;
    font-size: 14px;
}

.order-box {
    padding: 0 10px;
}

.orderImg {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0 20px 0;
    background-color: #FAFAFA;

    .camera {
        width: 10%;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
    }

    .visionGoodsEdit {
        width: 90%;

        .content {
            display: flex;
            align-items: center;
            padding: 10px;
            border-left: 3px solid #fff;
            border-bottom: 3px solid #fff;

            .order-left {
                width: 20%;
                display: flex;
                justify-content: space-evenly;
                align-items: center;

                div {
                    text-align: center;
                }

                .img-box {
                    width: 100px;
                    height: 100px;
                    line-height: 100px;

                    .el-image {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            .order-right {
                width: 80%;

                .order-middle {
                    padding: 0 10px 0 20px;
                    border-left: 2px solid #fff;

                    .goodsTotal {
                        margin-top: 10px;
                        color: red;
                        font-size: 12px;
                        font-weight: bold;
                    }
                }
            }
        }
    }
}

.goodsTitles {
    margin-bottom: 5px;
    color: #606266;
    font-weight: bold;
    margin-bottom: 10px;

    span {
        border: 1px solid transition;
        padding: 5px 10px;
        background-color: #EBEEF5;
        color: #A8ABB2;
        letter-spacing: 2px;
        font-size: 14px;
        border-radius: 5px;
    }

    .identifyTitle {
        background-color: #509eff;
        color: #fff;
    }
}

.infoColor {
    color: #73767a;
    margin-top: 10px;
}

.infoBackground {
    background-color: #509eff;
    color: #fff;
    letter-spacing: 1px;
}

.top {
    padding-top: 20px;
}

.successColor {
    color: red;
    font-weight: bold;
}

.identifyColor {
    color: #54c952;
    font-weight: bold;
}


.textStyle {
    font-size: 14px;
    font-weight: bold;
}
</style>
